import React from 'react';
import {inject, observer} from 'mobx-react';
import { Route, withRouter, Switch } from 'react-router-dom';
import { asyncComponent } from 'react-async-component';
// import QueueAnim from 'rc-queue-anim';

const coms = {
  Schdule: asyncComponent({ // 日程查看頁面
    resolve: () => import('../calendar/schedule')
  }),
  Create: asyncComponent({ 
    resolve: () => import('../create/index')
  }),
  SchduleSync: asyncComponent({
    resolve: () => import('../calendar/schduleSync')
  }),
  Detail: asyncComponent({
    resolve: () => import('../detail/index')
  })
}

@withRouter
@inject('calendarStore')
@observer
export default class RouteModal extends React.Component {
  render() {
    return (
      <div className='route-bgcolor'>
        <Switch>
          <Route 
            key="schdule"
            path="/calendar/:type/schdule"
            breadcrumbName="他人日程"
            render={() => (
              <div className="wm-route-layout">
                  <coms.Schdule />
              </div>
            )}
          />
          <Route 
            key="schdule-sync"
            path="/calendar/:type/schdulesync"
            breadcrumbName="日程同步"
            render={() => (
              <div className="wm-route-layout">
                  <coms.SchduleSync />
              </div>
            )}
          />
        </Switch>
      </div>
    )
  }
}